<template>
  <div class="bgc">
    <van-nav-bar
      title="文章详情"
      fixed
      placeholder
      left-arrow
      @click-left="$router.back()"
    />
    <div class="main-box">
      <h2>{{ info.title }}</h2>
      <!-- 主体框架 -->
      <div class="info-box">
        <div class="autor-box">
          <!-- 头像 -->
          <van-image fit="cover" round :src="info.aut_photo" />
          <!-- 作者信息 -->
          <div>
            <div class="autor">{{ info.aut_name }}</div>
            <div class="time">{{ info.pubdate | relaTime }}</div>
          </div>
        </div>
        <!-- 关注按钮 -->
        <div class="button-box" @click="followed">
          <van-button
            color="#d0355d"
            size="small"
            round
            type="info"
            v-if="!info.is_followed"
            >+关注</van-button
          >
          <van-button size="small" round plain v-else>已关注</van-button>
        </div>
      </div>
      <!-- 文章内容 -->
      <div class="content-box" v-html="info.content"></div>

      <!-- 点赞和不喜欢功能 -->
      <div class="zan">
        <van-button round type="primary" icon="like-o" @click="likings"
          >点赞</van-button
        >
        &nbsp;&nbsp;&nbsp;&nbsp;
        <van-button round type="info" icon="delete" @click="dislike"
          >不喜欢</van-button
        >
      </div>
    </div>
    <!-- 评论功能 -->
    <my-comment></my-comment>
  </div>
</template>

<script>
import {
  detailAPI,
  unFollowArticle,
  followArticle,
  articleDislike,
  articleLikings
} from '@/api/article'
import MyComment from './MyComment.vue'
export default {
  components: {
    MyComment
  },
  data() {
    return {
      info: {}
    }
  },
  methods: {
    async likings() {
      await articleLikings(this.info.art_id)
      this.$toast.success('操作成功')
    },
    async dislike() {
      await articleDislike(this.info.art_id)
      this.$toast.success('操作成功')
    },
    async followed() {
      if (this.info.is_followed) {
        await unFollowArticle(this.info.aut_id)
        this.info.is_followed = !this.info.is_followed
        this.$toast.fail('取消关注')
      } else {
        await followArticle(this.info.aut_id)
        this.info.is_followed = !this.info.is_followed
        this.$toast.success('成功关注')
      }
    }
  },
  async created() {
    const res = await detailAPI(this.$route.query.id)
    this.info = res.data
  }
}
</script>

<style lang="less" scoped>
.main-box {
  padding: 0 15px;
  h2 {
    font-size: 30px;
    margin: 10px 0;
  }
  .info-box {
    display: flex;
    justify-content: space-between;
    .autor-box {
      display: flex;
      align-items: center;
      .van-image {
        width: 80px;
        height: 80px;
        margin-right: 15px;
      }
      .time {
        font-size: 14px;
        color: gray;
      }
    }
  }
}
.content-box {
  margin-top: 20px;
  ::v-deep {
    pre,
    p {
      background-color: black;
      width: 100%;
      overflow: auto;
      color: lightgray !important;
      span {
        color: lightgray !important;
      }
    }
    img {
      width: 100%;
    }
  }
}
.button-box {
  .van-button {
    width: 60px;
    height: 32px;
    border: 1px solid #ddd;
  }
}
.zan {
  text-align: center;
  padding: 20px 0;
  .active {
    border-color: red;
    color: red;
  }
}
</style>
